<template>
	<view class="container">
		<!-- 主体内容 -->
		<view class="list">
			<view class="job-info" v-for="item in jobList" :key="item.id" @click="handleSelect(item.id)" :class="isSelect===item.id ? 'select' : '' ">
				<view class="first-line">
					<text>{{ item.name }}</text>
					<text>{{ item.applyNum }}/{{ item.number }}</text>
				</view>
				
				<view class="sencond-line">
					<image src="https://images.linglinggong.net/icon1/14.png" mode="aspectFill"></image>
					<text>{{ item.address }}</text>
				</view>
				
				<view class="third-line">
					<text>{{ item.taskType===0 ? '计时' : item.taskType===1 ? '计件' : item.taskType===2 ? '计天' : ''}}</text>
				</view>
				
				<view class="last-line">
					<text>{{ item.reward }}{{ item.taskType===0 ? '元/小时' : item.taskType===1 ? '元/件' : item.taskType===2 ? '元/天' : ''}}</text>
					<text>{{ (Math.round(item.distance*1000)/1000).toFixed(2) }}km</text>
				</view>
			</view>
		</view>
		
		<view class="fix-button" @click="handleInvite">确定</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: [], //[lat, lng]当前位置
				userInfo: { user: {}, params: {} },//当前用户信息
				imgPath:'',//图片路径
				street: {},//地点
				screenObj: {  //上传参数
					isAsc: 'asc',//排序(asc:正序,desc:倒序))
					region: '',//区域，街道
					taskType:'',//零工类型，0计时，1计件，2计天
					orderByColumn: 'createTime',//默认排序，0离我最近，1最新发布，2诚信值降序
					sex: '',//0男,1女，2性别不限
					startReward: '',//起薪
					endReward: '',//上限
					pageNum: 1,
					pageSize: 1000,
					status: 3,//上架的工作
					userId: '',//谁发布的
					lat: '',
					lng: '',
					token:'',
				},
				jobList: [],//我的零工列表jobTypeList
				staffId: '',//雇员id
				taskId: '',//任务id
				isSelect: '',
			}
		},
		methods: {
			// 选择或取消选择
			handleSelect(taskId) {
				this.taskId = taskId
				this.isSelect = this.isSelect == taskId ? '' : taskId
			},
			// 确认立即邀请
			async handleInvite() {
				let res = await this.$fetch(this.$api.invitation_order, {taskId: this.taskId, userIds: this.staffId,}, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				uni.showToast({ title: '邀请成功~', icon: 'none' })
				// setTimeout(() => { uni.redirectTo({ url: '/pages/my-job/boss-my-job' }) }, 800)
				setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 800)
			},
			
			// 获取列表
			async task_list() {
				this.screenObj.lat = this.location[0]
				this.screenObj.lng = this.location[1]
				this.screenObj.userId = this.userInfo.user.userId
				
				let res = await this.$fetch(this.$api.task_list, this.screenObj, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				res.rows.forEach(item => {
					item.reward = item.reward.divide(100)
				})
				this.jobList = res.rows
			},
		},
		onLoad(options) {
			this.staffId = options.staffId
			this.imgPath = uni.getStorageSync('imgPath')
			this.street = uni.getStorageSync('street')
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {
			this.location = uni.getStorageSync('location') //当前位置的经纬度
			this.task_list()
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/app-employer/send-job/send-job'
			})
		}
	}
</script>

<style lang="less" scoped>
.container {
	border: 0.1px solid rgba(255,255,255,0);
	// 列表
	& > .list {
		margin-bottom: 130rpx;
		& > .job-info {
			margin: 30rpx;
			background-color: #FFFFFF;
			padding: 30rpx;
			position: relative;
			// letter-spacing: 0;
			
			border-radius: 7px;
			box-shadow: 0 2px 14px 0 rgba(96,52,0,0.10);
			&.select {
				border: 1px solid #F39B19;
			}
			& > .first-line {
				margin-bottom: 20rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text:first-child {
					font-weight: bold;
					font-size: 17px;
				}
			}
			& > .sencond-line {
				// border: 1px solid #007AFF;
				margin-bottom: 26rpx;
				display: flex;
				align-items: center;
				& > image {
					width: 26rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				& >text {
					font-size: 12px;
					color: rgba(64,33,16,0.70);
				}
			}
			& > .third-line {
				// border: 1px solid #007AFF;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				& > text {
					line-height: 34rpx;
					width: 80rpx;
					text-align: center;
					font-size: 12px;
					color: #F39B19;
					border: 1px solid #F39B19;
					border-radius: 2px;
				}
			}
			& > .last-line {
				display: flex;
				justify-content: space-between;
				& > text:first-child {
					font-size: 17px;
					font-weight: bold;
					color: #FF650C;
				}
				& > text:last-child {
					align-self: flex-end;
					font-size: 12px;
					color: rgba(64,33,16,0.40);
				}
			}
		}
	}
	
	& > .fix-button {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100rpx;
		background-color: #FCC928;
		&:active {
			opacity: 0.7;
		}
	}
}
</style>
